<template>
  <div class="profile-detail-container">
    <el-card class="profile-card">
      <div class="profile-back-bar">
        <el-button class="back-btn" link @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
      <div class="profile-header">
        <el-avatar :size="64" :src="user.avatar" />
        <div class="profile-info">
          <div class="profile-title">
            <span class="name">{{ user.name }}</span>
            <span class="phone">{{ user.phone }}</span>
          </div>
          <div class="profile-location">{{ user.location }}</div>
          <div class="profile-tags">
            <el-tag v-for="tag in user.tags" :key="tag" type="info" class="tag">{{ tag }}</el-tag>
          </div>
        </div>
        <el-button type="primary" link class="edit-btn" @click="handleEdit">编辑资料</el-button>
      </div>
      <div class="profile-meta">
        <div>创建时间：{{ user.createdAt }}</div>
        <div>最后更新：{{ user.updatedAt }}</div>
      </div>
      <div class="profile-cert">
        <el-tag type="success" class="cert-tag">已认证</el-tag>
        <span class="cert-time">认证时间：{{ user.certTime }}</span>
      </div>
      <div class="id-photo-section">
        <div class="id-photo-block">
          <img :src="user.idFront" class="id-photo" />
          <div class="id-photo-label">身份证正面照片</div>
        </div>
        <div class="id-photo-block">
          <img :src="user.idBack" class="id-photo" />
          <div class="id-photo-label">身份证反面照片</div>
        </div>
      </div>
      <div class="bank-section">
        <div class="bank-header">
          <span class="bank-title">银行卡管理</span>
          <el-button type="primary" link class="bank-btn" @click="handleBankManage">管理银行卡</el-button>
        </div>
        <div v-for="card in user.bankCards" :key="card.number" class="bank-card">
          <div class="bank-info">
            <div class="bank-name">{{ card.bank }}</div>
            <div class="bank-number">{{ card.number }}</div>
          </div>
          <div class="bank-status">
            <el-tag type="success">已认证</el-tag>
            <el-icon><el-icon-arrow-right /></el-icon>
          </div>
        </div>
      </div>
    </el-card>
    <EditProfileDialog
      v-model="showEditDialog"
      :user="user"
      @save="handleSaveEdit"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import EditProfileDialog from './EditProfileDialog.vue'

const router = useRouter()
const goBack = () => {
  router.back()
}

const user = ref({
  avatar: 'https://randomuser.me/api/portraits/men/44.jpg',
  name: '张明远',
  phone: '138****5678',
  location: '杭州市, 西湖区, 文三路',
  tags: ['正式工长', '内部工匠', '工程部/高级工程师'],
  createdAt: '2023-01-15 10:30:00',
  updatedAt: '2023-10-20 15:45:32',
  certTime: '2023-05-19 14:30:00',
  idFront: 'https://randomuser.me/api/portraits/men/44.jpg', // 示例图片
  idBack: 'https://randomuser.me/api/portraits/men/45.jpg', // 示例图片
  bankCards: [
    { bank: '中国工商银行', number: '622848******1234' },
    { bank: '中国建设银行', number: '621558******5678' }
  ]
})

const showEditDialog = ref(false)
function handleEdit() {
  router.push({
    path: '/edit-profile',
    query: { user: JSON.stringify(user.value) }
  })
}
function handleSaveEdit(newUser) {
  user.value = { ...user.value, ...newUser }
}
function handleBankManage() {
  router.push('/bank-manage')
}
</script>

<style scoped>
.profile-detail-container {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  background: #f5f7fa;
  min-height: 100vh;
}
.profile-card {
  width: 100%;
  max-width: 480px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  padding: 24px 24px 16px 24px;
}
.profile-back-bar {
  margin-bottom: 8px;
}
.back-btn {
  font-size: 1em;
  color: #409EFF;
  padding-left: 0;
}
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}
.profile-info {
  flex: 1;
}
.profile-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1em;
  font-weight: bold;
}
.name {
  color: #222;
}
.phone {
  color: #666;
  font-size: 0.98em;
}
.profile-location {
  color: #888;
  font-size: 0.95em;
  margin: 2px 0 4px 0;
}
.profile-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tag {
  font-size: 0.92em;
  background: #f0f6ff;
  color: #409EFF;
  border: none;
}
.edit-btn {
  margin-left: 8px;
  font-size: 0.98em;
  padding: 0 8px;
}
.profile-meta {
  color: #888;
  font-size: 0.93em;
  margin: 8px 0 0 0;
  display: flex;
  gap: 16px;
}
.profile-cert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px 0;
}
.cert-tag {
  font-size: 0.95em;
}
.cert-time {
  color: #888;
  font-size: 0.93em;
}
.id-photo-section {
  display: flex;
  gap: 16px;
  margin: 12px 0 18px 0;
}
.id-photo-block {
  flex: 1;
  text-align: center;
}
.id-photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.id-photo-label {
  margin-top: 6px;
  color: #666;
  font-size: 0.95em;
}
.bank-section {
  margin-top: 18px;
}
.bank-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bank-title {
  font-weight: bold;
  font-size: 1.08em;
}
.bank-btn {
  font-size: 0.98em;
  padding: 0 8px;
}
.bank-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.bank-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bank-name {
  font-size: 1em;
  color: #222;
}
.bank-number {
  font-size: 0.97em;
  color: #888;
}
.bank-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
</style> 